body{       
	font-family: 'source cod pro',Comic sans Ms, casual, serif;
	margin: 0px;
	padding: 0px;	
	}

nav{
	width: 100%;
	background-color: #489086;
	}

nav>ul{
	margin: 0px;
	padding: 0px;	
}	 
	
nav>ul::after{
	content: "";
	display: block;
	clear: both;
}

nav>ul>li{
	float:left;
	position: relative;
	font-family:Comic sans Ms;
	font-size:25px;	
}
nav>ul>li>a{
	padding:20px 30px;
}

nav>ul>li:hover a{
	padding: 13px 30px 20px 30px;	
}

nav li{
	list-style-type: none;
}

.submenu{
	display: none;
}

nav a{
	display:inline-block;
	text-decoration:none;
}
nav li:hover .submenu{
		display: inline-block;
		position: absolute;
		top: 100%;
		left: 0px;
		padding: 0px;
		z-index: 1000;		
}
.submenu li{
	border-bottom: 1px solid Green; /* couleur et hauteur bordure haute des sous-menus menu principal */
}

.submenu li a{
		padding: 10px 10px;
		font-size: 15px;
		color: #17202A;	
		font-weight:bold;
		width:200px; /* apparence sous-menu taille et couleur des caractères  et taille de la boîte    */
}

.menu-html:hover{
	border-top: 5px solid #e44d26;
	background-color:RGBa(228,77,38,0.15); /* couleur et hauteur des bordures du menu principal  */
}	
.menu-css:hover{
	border-top: 5px solid #0070bb;
	background-color:RGBa(000,112,192,0.15); /* couleur et hauteur des bordures du menu principal  */
}
.menu-contact:hover{
	border-top: 5px solid #17202A;
	background-color:#82E0AA; /* couleur et hauteur des bordures du menu principal et couleur de fond survolée */
}

.menu-css .submenu{
background-color: RGB(000,160,240); /*couleur boîte Sous menu lors du survol du menu principal*/
}

.menu-html .submenu li:hover{
background-color: RGB(210,77,60);
}
.menu-css .submenu li:hover{
background-color: RGB(000,115,200);
}


@media only screen and (min-device-width : 1900px) and (max-device-width : 2300px) and (orientation : landscape) {
h1
{
text-align:	center;
color: green;	
padding: 2px;
}
}

@media only screen and (min-device-width : 900px) and (max-device-width : 1200px) and (orientation : landscape) {
h1
{
text-align:	center;
color: black;	
padding: 1px;
}
}





h2
{
text-align:center;
color:#17202A; 
padding: 5px;
}





.box {
  display: inline-block;
  width:70%;
  height:45%;  
  background:white;
  /*background: red;*/
  color: #0C3690;
  overflow:auto;
    }
  
 .boxbis {
  display: inline-block;
  width:45%;
  height:43%;  
  background: red;
  color: #0C3690;
  overflow:auto;
  }
  
  .boxa {
  display: inline-block;
  width:7%;
  height:15%;  
  background: red;
  color: #0C3690;
  overflow:auto;
  }
  
  .boxb {
  display: inline-block;
  width:10%;
  height:13%;  
  background: red;
  color: #0C3690;
  overflow:auto;
  }
  
.box-un {
  display: inline-block;
  width: 16%;
  height:25%;
  background: red;
  color: #0C3690; 
  overflow:auto;
 }

.box-deux {
	
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  width: 25%;
  height: 76%;
  background: red;
  color: #0C3690; 
  overflow:auto;
  }
  
.box-six {
  display: inline-block;
  width: 50%;
  height:35%;
  background: Blue;
  color: #0C3690; 
  overflow:auto;
}

.box-sept {
  display: inline-block;
  width: 16%;
  height: 8%;
  background: Blue;
  color: #0C3690; 
  overflow:auto;
}

.box-neuf {
  display: inline-block;
  width: 50%;
  height: 75%;
  background: red;
  color: #0C3690;
  overflow:auto;  
 }

.box-bas {
  display: inline-block;
  width: 40%;
  height: 8%;
  background: Blue;
  color: #0C3690;
  overflow:auto;
 border: 3px solid;
  
  
}

.button {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1rem;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  border-radius: 10px;
  background-color: rgba(15, 79, 102, 10);
  background-image: linear-gradient(
    to top left,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0)
  );
   }
   /* CSS uilisé pour le bouton Retour*/
  
@keyframes clignoter {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }

 .clignotant {
            animation: clignoter 1s infinite;
			
        }
/* Permet le clignotement du texte */

#un {
  position: absolute;
  top: 5%;  
  left: 5%;
  background: white;
  /*border: 3px solid;*/
  
}	
#deux {
  position: absolute;
  top: 17%;  
  left: 5%;
  background: white;
  /*border: 3px solid;*/
  
  
}

#trois {
  position: absolute;
  top: 15%;  
  left: 30%;
  background: white;
  /*border:3px solid;*/
}

#huit {
  position: absolute;
  top: 25%;  
  left: 30%;
  background: white;
  /*border:3px solid;*/
}

#neuf{
  position: absolute;
  top: 12%;  
  left: 27%;
  background: white;
  /*border:3px solid;*/
}
#onze{
  position: absolute;
  top: 30%;  
  left:62%;
  background: white;
  border:3px solid;
}
#douze{
  position: absolute;
  top: 30%;  
  left: 75%;
  background: white;
 /* border:3px solid;*/
}

#treize{
  position: absolute;
  top: 25%;  
  left: 33%;
  background: white;
 /* border:3px solid;*/
}


#quatorze{
  position: absolute;
  top: 10%;  
  left: 30%;
  background: white;
  border:3px solid;
}





#quatre {
  position: absolute;
  top: 30%;
  left: 45%;
  /* left: 3%;*/
  background: white;
  overflow:auto;
  min-width: 300px;
  /*border: 3px solid;*/
}

#quatrebis {
  position: absolute;
  top: 35%;  
  left: 30%;
  background: white;
  /*border: 3px solid;*/
}



#cinq {
  position: absolute;
  top: 20%;  
  left: 35%;
  background: linear-gradient(to bottom right, #00FFFF, #00CC66);  
  border-radius: 15%;
  padding:2%;
  overflow:auto;
 /* border: 3px solid;*/
  }
  
  
 #cinqbis {
  position: absolute;
  top: 58%;
  /*top: 35%; */ 
  left: 15%;
  /*background: linear-gradient(to bottom right, #00FFFF, #00CC66);  
  border-radius: 15%;*/
  padding:2%;
  overflow:auto;
  } 
  
  #cinqter {
  text-align: center;
  position: absolute;
  top: 20%;  
  left: 45%;
  background: linear-gradient(to bottom right, #00FFFF, #00CC66);  
  border-radius: 15%;
  padding:2%;
  overflow:auto;
  } 
  #cinqquart {
  position: absolute;
  top: 1%;  
  left: 20%;
  background: linear-gradient(to bottom right, #00FFFF, #00CC66);  
  border-radius: 15%;
  padding:2%;
  overflow:auto;
  } 
  

#six {
  position: absolute;
  top: 15%;  
  left: 80%;
  background: green;
  overflow:auto;
}

#sept {
  position: absolute;
  top: 93%;  
  left: 5%;
  background: white;
  overflow:auto;
  border:3px solid;
  }
  
#septbis {
  position: absolute;
  top: 65%;  
  left: 45%;
  background: white;
  overflow:auto;
  }
#baspage {
Position: absolute;
top: 93%;
left: 50%;
background: white;
overflow:auto;
/*border:3px solid;*/

}